<template>
  <q-layout class="fit non-selectable" view="hHh LpR lFf">
    <q-header :elevated="nonDashboard" class="layout-herder bg-transparent text-grey-8">
      <q-toolbar class="row full-width q-gutter-x-sm text-white relative-position">
        <LOGO v-if="!isXS"></LOGO>
        <q-btn :dense="isDense" :icon="menuDrawer ? 'format_indent_decrease' : 'format_indent_increase'"
               v-bind="btnAttr" @click="toggleMenuDrawer" />
        <q-btn :dense="isDense" class="q-btn-refresh" icon="refresh" v-bind="btnAttr" @click="handleReload">
          <q-tooltip v-bind="$tooltipAttr">{{ $t('Reload') }}</q-tooltip>
        </q-btn>
        <q-space></q-space>
        <ServiceList></ServiceList>
        <q-space></q-space>
        <Toolbar></Toolbar>
        <q-btn v-if="false" :dense="isDense" icon="settings_applications" v-bind="btnAttr" @click="toggleRightDrawer">
          <q-tooltip v-bind="$tooltipAttr">
            <div class="text-no-wrap">{{ $t('SystemSetup') }}</div>
          </q-tooltip>
        </q-btn>
      </q-toolbar>
      <ServiceStepBar></ServiceStepBar>
    </q-header>

    <q-drawer v-if="nonDashboard" v-model="menuDrawer" :width="220" class="overflow-hidden" elevated show-if-above>
      <Menus></Menus>
    </q-drawer>

    <q-dialog v-model="rightDrawerOpen" class="system-setting" full-height position="right">
      <system-setting></system-setting>
    </q-dialog>

    <q-page-container class="fit">
      <router-view v-slot="{ Component, route }">
        <transition name="q-transition--slide-right">
          <q-page :key="route.path" class="layout-page fit q-pa-md relative-position">
            <component :is="Component" v-if="!loading" />
            <q-inner-loading :showing="loading">
              <q-spinner-ios color="transparent" size="3rem" />
            </q-inner-loading>
            <q-resize-observer @resize="onResize" />
          </q-page>
        </transition>
      </router-view>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import Menus from 'pages/Menu/IndexMenu.vue'
import SystemSetting from 'pages/SystemSetting/IndexSetting.vue'
import LOGO from 'pages/Tools/LOGO.vue'
import Toolbar from 'pages/Tools/Toolbar.vue'
import ServiceList from 'pages/Tools/ServiceList.vue'
import ServiceStepBar from 'pages/Tools/ServiceStepBar.vue'
import { computed, inject, nextTick, provide, ref } from 'vue'
import { useRoute } from 'vue-router'

const isDense = inject('isDense', true)
const btnAttr = { round: true, 'fab-mini': true, flat: true }

const route = useRoute()
const loading = ref(true)
const mainPageSize = ref({})
const menuDrawer = ref(false)
const rightDrawerOpen = ref(false)
const handleLoad = bool => (loading.value = bool === true)
const setMenuDrawer = bool => (menuDrawer.value = bool === true)
const isXS = computed(() => mainPageSize.value.width < 800)
const toggleMenuDrawer = () => (menuDrawer.value = !menuDrawer.value)
const toggleRightDrawer = () => (rightDrawerOpen.value = !rightDrawerOpen.value)
const nonDashboard = computed(() => route.fullPath !== '/dashboard/console')
provide('handleLoad', handleLoad)
provide('setMenuDrawer', setMenuDrawer)
provide('mainPageSize', computed(() => mainPageSize.value))

const handleReload = () => {
  loading.value = true
  nextTick(() => (loading.value = false))
}
provide('handleReload', handleReload)

const onResize = size => (mainPageSize.value = size)
nextTick(() => handleReload())
</script>